<template>
  <div class="T">
    <div class="t on" v-for="v in 100" :key="v">{{ slogan_res(slogan) }}</div>
  </div>
</template>

<script>
export default {
  name: 'T',
  components: {},
  props: {
    slogan: {
      type: String,
      default: '青出于蓝而胜于蓝'
    }
  },
  computed: {},
  methods: {
    slogan_res(slogan) {
      const len = slogan.length;
      let idx = (Math.random() * (len - 4)) | 0;
      let l = (1 + Math.random() * 3) | 0;
      return slogan.substr(idx, l);
    }
  }
};
</script>
<style lang="scss" scoped>
.T {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 0;
}
div {
  .t {
    display: inline-block;
    box-sizing: border-box;
    margin: 0px;
    width: 10vw;
    height: 10vh;
    background-color: #f2f2f2;
    font-size: 1rem;
    font-family: '方正苏新诗柳楷繁体';
    vertical-align: middle;
    line-height: 10vh;
    opacity: 0;
  }
  .t.on {
    -webkit-animation: pulse 3s infinite linear alternate;
    -moz-animation: pulse 3s infinite linear alternate;
    animation: pulse 3s infinite linear alternate;
  }
  .t.on:hover {
    -webkit-animation: none;
    background-color: #eee;
    opacity: 0.5;
  }
}
@keyframes pulse {
  100% {
    background-color: #fff;
    opacity: 0.5;
  }
}
@font-face {
  font-family: '方正苏新诗柳楷繁体'; /* --自定义名字就好 */
  src: url('~@/assets/font/方正苏新诗柳楷繁体.ttf'); /* --下载的字体文件路径 */
}
</style>
